<template>
	<view class="container">
		<!-- 列表内容 -->
		<view v-for="member in members" :key="member.id">
			<view class="member-item">
				<view class="info-container">
					<text class="name">{{ member.name }}</text>
					<text class="relationship">{{ member.relationship }}</text>
					<text class="phone">{{ member.phone }}</text>
				</view>
				<view class="actions">
					<view class="btn edit-btn" @click="editMember(member.id)">
						<text class="btn-text">编辑</text>
					</view>
					<view class="btn delete-btn" @click="deleteMember(member.id)">
						<text class="btn-text">删除</text>
					</view>
				</view>
			</view>
		</view>
		<uni-fab class="fab-button" @fabClick="handleAddClick" :pattern="{ color: '#fff', backgroundColor: '#007AFF' }" />
	</view>
</template>

<script>
import { request } from '@/util/request.js'
export default {
	data() {
		return {
			members: []
		}
	},
	async onShow() {
		this.loadMembers()
	},
	methods: {
		async loadMembers() {
			const res = await request({
				url: 'owner-server/owner/family',
				method: 'GET'
			})
			if (res.code === 200) {
				this.members = res.data
			}
		},
		handleAddClick() {
			uni.navigateTo({ url: '/pages/addFamily/addFamily' })
		},
		editMember(id) {
			uni.navigateTo({
				url: `/pages/addFamily/addFamily?id=${id}`
			})
		},
		async deleteMember(id) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除该家庭成员吗？',
				success: async (res) => {
					if (res.confirm) {
						const res = await request({
							url: `owner-server/owner/family/${id}`,
							method: 'DELETE'
						})
						if (res.code === 200) {
							this.loadMembers()
							uni.showToast({ title: '删除成功' })
						}
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.container {
	position: relative;
	min-height: 100vh;
}

.fab-button {
	position: fixed;
	right: 30rpx;
	bottom: 80rpx;
	z-index: 999;
}

.member-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 30rpx;
	margin: 20rpx 30rpx;
	border-radius: 16rpx;
	background: #fff;
	box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.08);
}

.info-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.name {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.relationship,
.phone {
	font-size: 28rpx;
	color: #666;
}

/* 保留原有操作按钮样式 */
.actions {
	display: flex;
	gap: 20rpx;
}

.btn {
	padding: 10rpx 20rpx;
	border-radius: 8rpx;
}

.edit-btn {
	background-color: #007AFF;
}

.delete-btn {
	background-color: #dd524d;
}

.btn-text {
	color: white;
	font-size: 24rpx;
}

.name {
	font-size: 32rpx;
	color: #333;
}

.relationship {
	font-size: 28rpx;
	color: #666;
}

.phone {
	font-size: 28rpx;
	color: #666;
}
</style>